<template id="index">
    <div>
        {{modal1}}
            <i-button @click.native="show">Click me!</i-button>
            <i-icon type="checkmark"></i-icon>
            <button @click="show">haha</button>
            <i-switch></i-switch>

            <i-circle :percent="80">
                    <span class="demo-Circle-inner" style="font-size:24px">80%</span>
                </i-circle>
                <i-circle :percent="100" stroke-color="#5cb85c">
                    <Icon type="ios-checkmark-empty" size="60" style="color:#5cb85c"></Icon>
                </i-circle>
                <i-circle :percent="35" stroke-color="#ff5500">
                    <span class="demo-Circle-inner">
                        <Icon type="ios-close-empty" size="50" style="color:#ff5500"></Icon>
                    </span>
                </i-circle>
                <i-rate v-model="value"></i-rate>


                
    </div>
</template>

<script>
    var Index=Vue.extend({
        template:"#index",       
        methods: {
            show () {
                debugger
                this._data.modal1 = true;
                this._data.cnt++;
            }
        },
        data(){
            return {
                cnt:0,
                value:0,
                modal1: false
            }
        }
    });
</script>